<template>
  <!--监测手机号任务 -->
  <div class="app-container">
    <div class="zdy-main" v-loading="loading">
      <el-button type="primary" plain style="margin-bottom:10px" @click="back">返回</el-button>
      <el-descriptions title="" v-if="taskInfo.name" :column="3" border>
          <el-descriptions-item label="监控名称">{{taskInfo.name}}</el-descriptions-item>
          <el-descriptions-item label="检查间隔">{{taskInfo.intervalDays}}天</el-descriptions-item>
          <el-descriptions-item label="监控类型"><el-tag :type="taskTypeOptions[taskInfo.type].type">{{taskTypeOptions[taskInfo.type].label}}</el-tag></el-descriptions-item>
          <el-descriptions-item label="备注">{{taskInfo.remark}}</el-descriptions-item>
      </el-descriptions>
      <div style="height:15px"></div>
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        class="search-form-new"
        label-width="auto"
      >
      <!-- <el-form-item label="监控类型" prop="type">
          <el-select v-model="queryParams.type">
            <el-option
              :label="item.label"
              :value="key"
              v-for="(item,key) in taskTypeOptions"
              :key="key"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="商品编号" prop="goodsId">
          <el-input
            v-model="queryParams.goodsId"
            placeholder="请输入"
            clearable
            size="small"
          />
        </el-form-item>

        <el-form-item class="btns">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="search"
            >搜索</el-button
          >
          <el-button
            icon="el-icon-plus"
            type="success"
            @click="addACount"
            >新增</el-button
          >
          <el-button
            icon="el-icon-remove"
            type="danger"
            plain
            :disabled="ids.length==0"
            @click="remove"
            >批量移除</el-button
          >
        </el-form-item>
      </el-form>
      <div class="table_box">
        <el-table
          :data="tableData.records"
          style="width: 100%"
          @selection-change="handleSelection"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="商品编号" width="100" >
            <template slot-scope="scope">
              <span>{{ scope.row.goodsId }}</span>
            </template>
          </el-table-column>
          <el-table-column label="价格" prop="price" ></el-table-column>
          
          <el-table-column label="游戏账号" prop="accountNumber"></el-table-column>
          <el-table-column label="手机号" prop="securityPhone"></el-table-column>
          <el-table-column label="游戏名称" prop="gameName"  />
          <el-table-column label="区服" prop="" show-overflow-tooltip>
            <template slot-scope="scope">
              <div>{{scope.row.systemName+'/'+scope.row.carrierName+'/'+scope.row.groupName+'/'+scope.row.serverName}}</div>
            </template>
          </el-table-column>
          <el-table-column  label="商品状态" width="120" prop="saleState">
            <template slot-scope="scope">
              <el-tag :type="statusMap[scope.row.saleState] ? statusMap[scope.row.saleState].type : ''">{{
                statusMap[scope.row.saleState] ? statusMap[scope.row.saleState].name : '' }}</el-tag>

            </template>
          </el-table-column>
          <el-table-column label="操作" >
            <template slot-scope="scope">
              <!-- <el-button type="edit"  @click="handleUpdate(scope.row)">编辑</el-button> -->
              <el-button
                type="del"
                @click="remove(scope.row)"
                >移除</el-button
              >
              <!-- <el-button type="text" size="mini" @click="queryItem(scope.row)"
                >查询</el-button
              > -->
              <!-- <el-button type="text" size="mini" @click="queryRecords(scope.row)"
                >查询记录</el-button
              > -->
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="tableData.total > 0" :total="tableData.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                  @pagination="getList" />
      </div>
    </div>
    
    <!-- 一下是弹出框 -->
    <addDialog ref="addDialog"></addDialog>
    <!-- <recordsDialog ref="recordsDialog"></recordsDialog> -->
  </div>
</template>

<script>
import addDialog from "./addGoodsDialog.vue";
import recordsDialog from "./records.vue";
import checkPhoneApi from "@/api/gameConfig/checkPhonePx";
import shengyu from "@/components/yudu/shengyu.vue";
export default {
  name: "checkPhone",
  components: { addDialog, recordsDialog, shengyu },
  data() {
    return {
      taskInfo:{},
      tableData: {
        records: [],
        total: 0,
      },
      statusMap: {
        0: {
          name: "待审核",
          type: "warning",
        },
        1: {
          name: "在售商品",
          type: "success",
        },
        2: {
          name: "交易中",
          type: "warning",
        },
        3: {
          name: "已售商品",
          type: "",
        },
        4: {
          name: "下架商品",
          type: "danger",
        },
        5: {
          name: "问题商品",
          type: "danger",
        },
        6: {
          name: "损耗商品",
          type: "danger",
        },
        88: {
          name: "回收中",
          type: "warning",
        },
      },
   
      taskTypeOptions:
      {
        1:{
          label: "掉绑监控",
          value: "1",
          type:'success'
        },
        2:{
          label: "转手监控",
          value: "2",
          type:'danger'
        }
      },
     
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 20
      },
      taskId:'',
      selects:[],
      ids:[]
      // shengyu:0
    };
  },
  created() {
    // this.getList();
    // this.residueNumber()
  },
  watch: {
    $route: {
      handler: function (route) {
        console.log("%c Line:205 🍤 route", "color:#ea7e5c", route);
        if(route.params && route.params.taskId){
          this.taskId = route.params.taskId
          this.getInfo(route.params.taskId)
          this.getList()
        }
      },
      immediate: true,
      deep:true
    }
  },
  methods: {
    // 返回
    back(){
      window.history.go(-1)
    },
    // 移除商品
    remove(row){
      const ids = row.id || this.ids.join(',');
      if (!ids) {
        return this.$alert('请先选择数据！')
      }
      // 移除商品
      const that = this
      this.$modal
        .confirm('是否确认将编号为"' + ids + '"的商品移除该监控任务？')
        .then(function () {
          that.loading = true;
          checkPhoneApi.removeBatch(ids).then((res) => {
            that.loading = false
            that.$message({
              type: "success",
              message: res.msg,
            });
            that.getList();
          }).catch(err=>{
            that.loading = false
          })
        })
        .catch(() => { });


    },
    // 表格选择项改变
    handleSelection(arr) {
      ////console.log("%c Line:442 🍆 表格选择改变", "color:#f5ce50", arr);
      this.selects = arr
      this.ids = []
      if (arr.length == 0) {
        this.ids = []
      } else {
        arr.forEach(t => {
          this.ids.push(t.id)
        })
      }
    },
    // 获取监控详情
    getInfo(taskId){
      checkPhoneApi.getTaskDetail(taskId).then(res=>{
        this.taskInfo = res.data
      })
    },
    // 获取列表
    getList() {
      this.tableData.records = [];
      this.queryParams.monitorTaskId = this.taskId
      this.loading = true;
        checkPhoneApi
          .getGoodsByTaskId(this.queryParams)
          .then((response) => {
            this.loading = false;
            this.tableData.records = response.rows;
            this.tableData.total = response.total;
          })
          .catch((err) => {
            this.loading = false;
          });
    },
   
    // 搜索
    search() {
      this.getList();
    },
    //重置
    resetQuery() {
      this.queryParams = {};
      this.getList();
    },
    // 新增
    addACount() {
      this.$refs.addDialog.open(this.taskInfo);
    },
  
    // 查询记录弹窗打开
    queryRecords(row) {
      this.$refs.recordsDialog.open(row.id);
    },
  },
};
</script>
<style lang="scss" scoped></style>
